import { FC, useState, useEffect } from "react"
import styles from "./index.less"
import LabelWraper from "@/components/LabelWraper"
import LabelCard, { columnsProps } from "@/components/LabelCard"
import ConsultUsers from "./ConsultUsers/ConsultUsers"
import PatientInfo from "./PatientInfo/PatientInfo"
import MutilTabs from "@/components/MutilTabs"
import { IMutilTabsProps } from "@/components/MutilTabs/index"
import TabReport from "./TabReport/TabReport"
import TabDiscussion from "./TabDiscussion/TabDiscussion"
import TabHolographic from "./TabHolographic/TabHolographic"
import { history, connect, Dispatch, Loading } from "umi"
import { IDetailState } from "@/models/consultationDetailModel"
import { TabPaneProps } from "antd/es/tabs"


const columnsCard: columnsProps = [
  {
    label: "住 院 号",
    prop: "patientCard",
    rowId: 1
  },
  {
    label: "会诊主题",
    prop: "topic",
    rowId: 2
  },
  {
    label: "会诊小组",
    prop: "groupName",
    rowId: 3
  },
  {
    label: "会诊时间",
    prop: "startTime",
    rowId: 4
  },
  {
    label: "会诊目的",
    prop: "goal",
    rowId: 5
  },
  {
    label: "会诊成员",
    prop: "consultUserStr",
    rowId: 6
  }
]

export interface ConsultationDetailProp {
  conDetail: IDetailState
  dispatch: Dispatch,
  loading: Loading
}


const consultationDetail: FC<ConsultationDetailProp> = ({ conDetail, dispatch, loading }) => {
  // const [loading, setLoading] = useState<boolean>(false)
  const [tabValue, setTabValue] = useState<string>("0")
  let [tabPanes, setTabPanes] = useState<IMutilTabsProps>()
  const handlerTabs = (key: string) => {
    setTabValue(key)
  }

  /**
   * 初始化数据tabs
   */
  const initComponent = () => {
    if (conDetail?.details && (conDetail.details.status)) {
      let newTabValue: IMutilTabsProps = {
        tabValue: tabValue,
        tabsAtrrs: {
          className: `${styles.dttailTabsBox}`,
          onChange: (key: string) => { handlerTabs(key) },
        },

        columns: [
          {
            className: "",
            tab: "患者信息",
            children: <PatientInfo />,
          },
          {
            className: "",
            tab: "360全息视图",
            children: <TabHolographic />,
          }
          // {
          //   className: "",
          //   tab: "会诊报告",
          //   children: <TabReport />,
          // },
          // {
          //   className: `${styles.discussionMain}`,
          //   tab: "讨论",
          //   children: <TabDiscussion />,
          // }
        ]
      }
      if (conDetail.details.status && newTabValue?.columns && newTabValue.columns.length > 0) {
        const itemTabReport: TabPaneProps = {
          className: "",
          tab: "会诊报告",
          children: <TabReport />
        }
        const itemTabDiscussion: TabPaneProps = {
          className: `${styles.discussionMain}`,
          tab: "讨论",
          children: <TabDiscussion />,
        }
        switch (conDetail.details.status) {
          case 4:
            newTabValue.columns.push(itemTabReport as never)
            newTabValue.columns.push(itemTabDiscussion as never)
            break
          case 5:
            newTabValue.columns.push(itemTabReport as never)
            break
          default:
            break
        }

      }
      setTabPanes(newTabValue)
    }

  }

  useEffect(() => {
    // console.log(conDetail)
    // patientInfo = conDetail
    initComponent()
  }, [conDetail, tabValue])

  return (
    <div className={styles.consultationDetail}>
      <LabelWraper labelWraperClass={styles.detailLeft} loading={loading.models.conDetail}>
        <div className={styles.patientInfo}>
          <div className={styles.patientInfoLeft}>
            <span className={styles.patientName}>{conDetail.details ? conDetail.details.patientName : ""}</span>
            <span className={styles.patientSex}>{`（${conDetail.details ? conDetail.details.patientName : ""} | ${conDetail.details ? conDetail.details.cancelExplain : ""}岁）`}</span>
          </div>
          <div className={styles.patientInfoRight}>{conDetail.details ? conDetail.details.statusRes : ""}</div>
        </div>
        <LabelCard columns={columnsCard} model={conDetail.details ? conDetail.details : {}} />
        <ConsultUsers />
      </LabelWraper>
      <LabelWraper labelWraperClass={styles.detailRight} labelWraperBodyClass={styles.DetailLabelWraperBody}>
        <MutilTabs {...tabPanes} />

      </LabelWraper>
    </div>
  )
}

const mapStateToProps = ({ conDetail, loading }: { conDetail: IDetailState, loading: Loading }) => {
  return {
    conDetail,
    loading
  }
}

export default connect(mapStateToProps)(consultationDetail)